<template>
    <el-card shadow="never">
        <div slot="header">动态表单(subform)</div>
        <DynamicForm :schema="schema" :rules="rules" :formData="formData"></DynamicForm>
        <div class="markdown-body">
            <CodeTpl></CodeTpl>
        </div>
    </el-card>
</template>

<script>
import CodeTpl from './md/subform.md';

let flag = 1;
export default {
    components: {
        CodeTpl
    },
    data() {
        return {
            schema: {
                properties: {
                    list1: {
                        label: '列表1',
                        widget: 'subform',
                        props: {
                            asterisk: ['title'],
                            operate: ['add', 'del'],
                        },
                        properties: {
                            title: {
                                label: '标题',
                                widget: 'input',
                                rules: [
                                    {required: true, message: '请输入标题', trigger: 'blur'}
                                ]
                            },
                            num: {
                                label: '数字',
                                widget: 'inputNumber'
                            }
                        }
                    },
                    list2: {
                        label: '列表2',
                        widget: 'subform',
                        props: {
                            asterisk: ['bh', 'name'],
                            operate: ['add', 'del'],
                            subformAddLazy(resolve) {
                                setTimeout(() => {
                                    resolve({
                                        bh: ++flag
                                    })
                                }, 1000)
                            },
                            subformDelLazy: (resolve) => {
                                setTimeout(() => {
                                    const boo = Math.random() > 0.5;
                                    if(boo) {
                                        this.$message.success('删除成功')
                                    } else {
                                        this.$message.error('删除失败')
                                    }
                                    resolve( boo > 0.5)
                                }, 1000)
                            }
                        },
                        properties: {
                            bh: {
                                label: '产品编号',
                                widget: 'input',
                                rules: [
                                    {required: true, message: '请输入产品编号', trigger: 'blur'}
                                ]
                            },
                            name: {
                                label: '产品名称',
                                widget: 'input',
                                rules: [
                                    {required: true, message: '请输入产品名称', trigger: 'blur'}
                                ]
                            },
                            pc: {
                                label: '批次号',
                                widget: 'input',
                                ui: {
                                    disabled: true
                                }
                            },
                            scrq: {
                                label: '生产日期',
                                widget: 'datePicker'
                            },
                            fj: {
                                label: '附件',
                                widget: 'upload',
                                ui: {
                                    action: 'https://jsonplaceholder.typicode.com/posts/',
                                    showFileList: false,
                                }
                            },
                            bz: {
                                label: '备注',
                                widget: 'input',
                                ui: {
                                    type: 'textarea'
                                }
                            }
                        }
                    }
                },
                ui: {
                    labelWidth: '100px'
                },
                grid: {
                    row: {
                        gutter: 20
                    }
                }
            },
            formData: { 
                list2: [{pc: 'PC001'}]
            },
            rules: {
                'list1[0].num': [
                    {required: true, message: '请输入数字', trigger: 'blur'}
                ]
            }
        }
    },
}
</script>

<style>

</style>